<template>
  <view 
    class="skyline-modal" 
    :class="{ 'modal-visible': show }"
    :style="{ zIndex:show? zIndex:-1 }"
  >
    <!-- 遮罩层 -->
    <view 
      class="modal-mask" 
      @tap="handleMaskClick"
      :class="{ 'mask-visible': show }"
    ></view>
    
    <!-- 弹窗内容 -->
	<pan-gesture-handler onGestureEvent="handlepan">
    <view 
      class="modal-content"
      :class="{ 'content-visible': show }"
      :style="contentStyle"
    >
      <!-- 标题区域 -->
      <view v-if="title" class="modal-title">{{ title }}</view>
      
      <!-- 内容区域（插槽） -->
      <view class="modal-body">
        <slot></slot>
      </view>
      
      <!-- 按钮区域 -->
      <view class="modal-footer">
        <button 
          v-if="showCancel" 
          class="modal-btn cancel-btn"
          @tap="handleCancel"
        >
          {{ cancelText }}
        </button>
        <button 
          class="modal-btn confirm-btn"
          @tap="handleConfirm"
        >
          {{ confirmText }}
        </button>
      </view>
    </view>
	</pan-gesture-handler>
  </view>
</template>

<script>
	import {
		ref,
		onMounted,
		watch,
		nextTick,
		getCurrentInstance
	} from "vue"
	const GestureState = {
		POSSIBLE: 0,
		BEGIN: 1,
		ACTIVE: 2,
		END: 3,
		CANCELLED: 4
	}
	const {
		shared,
		spring
	} = wx.worklet;
	const x = shared(0);
	const y = shared(0);
	const itemy = shared(0);
	const scale = shared(1);
	const pressed = shared(false);
	const wxWidth = shared(0)
	const wxHeight = shared(0)
export default {
  name: 'SkylineModal',
  props: {
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: ''
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确认'
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: true
    },
    // 点击遮罩是否关闭弹窗
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 弹窗z-index
    zIndex: {
      type: Number,
      default: 1000
    },
    // 弹窗内容样式
    contentStyle: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    // 监听显示状态变化，控制页面滚动
    show(newVal) {
      if (typeof wx !== 'undefined') {
        // Skyline模式下控制页面滚动
        wx.setPageStyle({
          style: {
            overflow: newVal ? 'hidden' : 'auto'
          }
        })
      }
    }
  },
  mounted() {
  	const {
  		globalProperties: global
  	} = getCurrentInstance().appContext.config;
  	const {
  		windowWidth,
  		windowHeight
  	} = global.windowInfo
  	wxWidth.value = windowWidth
  	wxHeight.value = windowHeight
  	console.log('windowWidth', windowWidth);
  	const scope = getCurrentInstance().proxy.$scope
  	scope.applyAnimatedStyle('.modal-content', () => {
  		'worklet';
  		return {
  			// backgroundColor: pressed.value ? 'rgba(170, 255, 255, 0.5)' : 'rgba(213, 255, 255, 0.3)',
  			transform: `translate(${x.value}px, ${y.value}px) scale(${scale.value})`,
  		};
  	});
  	
  	
  },
  methods: {
	  handlepan(evt) {
	  	'worklet';
	  	if (evt.state === GestureState.POSSIBLE) {
	  		pressed.value = true
	  		scale.value = spring(1.1);
	  	} else if (evt.state === GestureState.END || evt.state === GestureState.CANCELLED) {
	  		pressed.value = false
	  		scale.value = spring(1);
	  		if (x.value > 0) {
	  			x.value = spring(0);
	  		} else if ((wxWidth.value + x.value) < 300) {
	  			x.value = spring(-(wxWidth.value - 300));
	  		}
	  		if (((wxHeight.value * 0.3 * 0.3) - y.value) < 0) {
	  			y.value = spring(wxHeight.value * 0.3 * 0.3);
	  		} else if (((wxHeight.value * 0.3) + y.value) < 0) {
	  			y.value = spring(-wxHeight.value * 0.3);
	  		}
	  		console.log('y', y.value);
	  	} else if (evt.state === GestureState.ACTIVE) {
	  		x.value += evt.deltaX;
	  		y.value += evt.deltaY;
	  	}
	  },
    // 点击确认
    handleConfirm() {
      this.$emit('confirm')
    },
    // 点击取消
    handleCancel() {
      this.$emit('cancel')
    },
    // 点击遮罩
    handleMaskClick() {
      if (this.maskClosable) {
        this.$emit('maskClick')
        this.$emit('cancel')
      }
    }
  }
}
</script>

<style scoped>
.skyline-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* 遮罩层样式 */
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 遮罩显示状态 */
.mask-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 弹窗内容样式 */
.modal-content {
  width: 600rpx;
  max-width: 90%;
  background-color: #fff;
  border-radius: 24rpx;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  overflow: hidden;
}

/* 弹窗内容显示状态 */
.content-visible {
  transform: scale(1);
  opacity: 1;
}

/* 标题样式 */
.modal-title {
  padding: 30rpx 30rpx 15rpx;
  font-size: 34rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
}

/* 内容区域样式 */
.modal-body {
  padding: 30rpx;
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
}

/* 底部按钮区域 */
.modal-footer {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #eee;
}

/* 按钮样式 */
.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0;
  margin: 0;
  border: none;
  font-size: 32rpx;
  background-color: transparent;
}

/* 取消按钮 */
.cancel-btn {
  color: #666;
  border-right: 1px solid #eee;
}

/* 确认按钮 */
.confirm-btn {
  color: #007aff;
}

/* 去除按钮默认样式 */
::v-deep .modal-btn::after {
  border: none;
}
</style>
